<template>
  <div>
    <h1>About</h1>
    <el-row :gutter="24">
      <el-col :span="16">
        <div class="line" v-for="member in tryStore.members">
          <span style="width:60px">{{ member.userId }}</span>
          <span style="width:60px">{{ member.userName }}</span>
          <!-- <span>{{ member.orgId }}</span> -->
          <!-- <span>{{ member.orgName }}</span> -->
          <!-- <span>{{ member.tags.join(', ') }}</span> -->
          <el-select style="width:360px" v-model="member.tags" multiple>
            <el-option v-for="item in tryStore.memberTags" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8">
        <pre>{{ JSON.stringify(tryStore.members, null, 2) }}</pre>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

import useTryStore from "@/pinia/try.js";
const tryStore = useTryStore();

</script>

<style lang="css" scoped>
.line {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.line>* {
  margin: 0 12px;
}
</style>
